<template>
  <div class="concact">
    <div class="appPc" v-if="$store.state.screenWidth > 1300">
      <div class="backdrop">
        <img
          src="https://ir3.anbio.xyz/uploads/image/6528681748657426.jpg"
          alt=""
        />
        <h1 class="title">Contact</h1>
      </div>

      <div class="please interval">
        <div class="block">
          <div class="parallel">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              class="parallel-input"
            >
              <el-form-item label="Email*" prop="email" class="list">
                <el-input v-model="ruleForm.email"></el-input>
              </el-form-item>
              <el-form-item label="First Name*" prop="firstName" class="list">
                <el-input v-model="ruleForm.firstName"></el-input>
              </el-form-item>
              <el-form-item label="Last Name*" prop="lastName" class="list">
                <el-input v-model="ruleForm.lastName"></el-input>
              </el-form-item>
              <el-form-item label="Company" prop="Company" class="list">
                <el-input v-model="ruleForm.Company"></el-input>
              </el-form-item>
              <el-form-item label="Contact Type" prop="Type" class="list">
                <el-select
                  v-model="ruleForm.Type"
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="Phone" prop="Phone" class="list">
                <el-input v-model="ruleForm.Phone"></el-input>
              </el-form-item>
              <el-form-item label="Comments*" prop="comments" class="lists">
                <el-input
                  type="textarea"
                  :rows="6"
                  placeholder=""
                  v-model="ruleForm.comments"
                >
                </el-input>
              </el-form-item>
            </el-form>
          </div>

          <div class="button" @click="systemGetMet('ruleForm')">Submit</div>
        </div>
      </div>
    </div>

    <div class="appH5" v-else>
      <div class="popup-lint"></div>

      <div class="backdrop">
        <img
          src="https://ir3.anbio.xyz/uploads/image/6528681748657426.jpg"
          alt=""
        />
        <h1 class="title">Contact</h1>
      </div>

      <div class="please">
        <div class="block">
          <div class="parallel">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              class="parallel-input"
            >
              <el-form-item label="Email*" prop="email" class="list">
                <el-input v-model="ruleForm.email"></el-input>
              </el-form-item>
              <el-form-item label="First Name*" prop="firstName" class="list">
                <el-input v-model="ruleForm.firstName"></el-input>
              </el-form-item>
              <el-form-item label="Last Name*" prop="lastName" class="list">
                <el-input v-model="ruleForm.lastName"></el-input>
              </el-form-item>
              <el-form-item label="Company" prop="Company" class="list">
                <el-input v-model="ruleForm.Company"></el-input>
              </el-form-item>
              <el-form-item label="Contact Type" prop="Type" class="list">
                <el-select
                  v-model="ruleForm.Type"
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="Phone" prop="Phone" class="list">
                <el-input v-model="ruleForm.Phone"></el-input>
              </el-form-item>
              <el-form-item label="Comments*" prop="comments" class="lists">
                <el-input
                  type="textarea"
                  :rows="6"
                  placeholder=""
                  v-model="ruleForm.comments"
                >
                </el-input>
              </el-form-item>
            </el-form>
          </div>

          <div class="button" @click="systemGetMet('ruleForm')">Submit</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { contactPost } from "../../api";

export default {
  data() {
    return {
      ruleForm: {
        firstName: "",
        lastName: "",
        email: "",
        Company: "",
        Type: "",
        Phone: "",
        comments: "",
      },
      rules: {
        firstName: [
          {
            required: true,
            message: "Field should not be empty",
            trigger: "blur",
          },
        ],
        lastName: [
          {
            required: true,
            message: "Field should not be empty",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "Field should not be empty",
            trigger: "blur",
          },
        ],
        comments: [
          {
            required: true,
            message: "Field should not be empty",
            trigger: "blur",
          },
        ],
      },

      options: [
        {
          value: "- None -",
        },
        {
          value: "Individual Investor",
        },
        {
          value: "Individual investor, Private & Public Company",
        },
        {
          value: "Broker - Dealer, Analyst",
        },
        {
          value: "Broker - Dealer, Broker/FC",
        },

        {
          value: "Broker - Dealer, Institutional Sales",
        },
        {
          value: "Broker - Dealer, Investment Banker",
        },
        {
          value: "Broker - Dealer, Trading",
        },
        {
          value: "Broker - Dealer, Other",
        },
        {
          value: "Buy - side, Analyst",
        },
        {
          value: "Buy - side, Portfolio Manager",
        },
        {
          value: "Buy - side, Trading",
        },
        {
          value: "Buy - side, Venture Capitalist",
        },
        {
          value: "Buy - side, Trustee",
        },
        {
          value: "Buy - side, Other",
        },
        {
          value: "Corporate, Franchiser",
        },
        {
          value: "Corporate, IR/PR",
        },
        {
          value: "Corporate, Management",
        },
        {
          value: "Corporate, Treasury/ M&A",
        },
        {
          value: "Corporate, Other",
        },
        {
          value: "Media, Editor",
        },

        {
          value: "Media, Journalist",
        },
        {
          value: "Media, Library",
        },
        {
          value: "Media, Other",
        },
        {
          value: "Services, Accounting",
        },
        {
          value: "Services, Consulting",
        },
        {
          value: "Services,IR/PR",
        },
        {
          value: "Services, Legal",
        },
        {
          value: "Services, Other",
        },
        {
          value: "Other, Other",
        },
      ],
    };
  },
  created() {
    this.scrollTotap();
  },
  methods: {
    scrollTotap() {
      window.scrollTo(0, 0);
    },
    systemGetMet(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            email: this.ruleForm.email,
            firstName: this.ruleForm.firstName,
            lastNane: this.ruleForm.lastName,
            company: this.ruleForm.Company,
            phone: this.ruleForm.Phone,
            messag: this.ruleForm.comments,
            contactType: this.ruleForm.Type,
          };

          contactPost(params).then((res) => {
            if (res.errorCode == null) {
              this.$message({
                type: "success",
                message: "提交成功！",
                offset: 100,
              });

              this.ruleForm.email = "";
              this.ruleForm.firstName = "";
              this.ruleForm.lastName = "";
              this.ruleForm.Company = "";
              this.ruleForm.Phone = "";
              this.ruleForm.comments = "";
              this.ruleForm.Type = "";
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.concact {
  .appPc {
    .backdrop {
      height: 205px;
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
      }

      .title {
        letter-spacing: 1.5px;
        color: #fff;
        position: relative;
        font-size: 48px;
        font-weight: bold;
      }
    }

    .please {
      padding: 30px 0 60px;
      box-sizing: border-box;

      .block {
        padding: 40px 40px 60px;
        background: #f6faff;
        border-radius: 5px;

        .parallel {
          margin-top: 20px;

          .parallel-input {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 100%;
            .list,
            .lists {
              width: calc((100% / 2) - 20px);
              margin-bottom: 70px;
              height: 70px;

              /deep/ .el-form-item__label {
                font-size: 18px;
                color: #000;
              }

              /deep/ .el-input__inner {
                height: 70px;
                line-height: 70px;
              }
            }

            /deep/ .el-form-item__error {
              font-size: 18px;
            }

            /deep/ .el-select {
              width: 100%;
            }

            .lists {
              width: 100%;
              height: 200px;
            }
          }
        }

        .button {
          padding: 15px 30px;
          box-sizing: border-box;
          color: #fff;
          font-size: 20px;
          font-weight: bold;
          background: #276cd3;
          border-radius: 30px;
          cursor: pointer;
          width: 150px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  .appH5 {
    .backdrop {
      height: 200px;
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
      }

      .title {
        letter-spacing: 1.5px;
        color: #fff;
        position: relative;
        font-size: 24px;
        font-weight: bold;
      }
    }

    .please {
      .block {
        padding: 20px 20px 60px;
        background: #f6faff;
        border-radius: 5px;

        .parallel {
          .parallel-input {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 100%;
            .list,
            .lists {
              width: 100%;
              margin-bottom: 60px;
              height: 50px;

              /deep/ .el-form-item__label {
                font-size: 18px;
                color: #000;
              }

              /deep/ .el-input__inner {
                height: 50px;
                line-height: 50px;
              }
            }

            /deep/ .el-form-item__error {
              font-size: 14px;
            }

            /deep/ .el-select {
              width: 100%;
            }

            .lists {
              width: 100%;
              height: 200px;
            }
          }
        }

        .button {
          padding: 15px 30px;
          box-sizing: border-box;
          color: #fff;
          font-size: 20px;
          font-weight: bold;
          background: #276cd3;
          border-radius: 30px;
          cursor: pointer;
          width: 150px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>